{extend name="main"}
{block name="style"}
{css href="__TEMPLATE_STATIC__/user.css"}
<style>
	.form-item-lable .el-form-item__label{font-size: 3rem;color: #1E54E5;}
	.form-item-lable .el-form-item__content{line-height: 2}
</style>
{/block}
{block name="header"}
{include file="module/user_top_nav"/}
{/block}
{block name="body"}
<div class="flex1 flex h-100">
	<div class="w-180px nav-left p-4 overflow-y-auto">
	{include file="module/user/company_left" left="module/user/company_left_jobs"/}
	</div>
	<div class="frame-body flex-1 overflow-y-auto py-3">
		<div class="container-xl bg-white shadow pb-3">
			<div class="flex">
				<div class="flex-1 block-title-before py-2">{{is_edit?'编辑职位':'发布职位'}}</div>
			</div>
			<div class="bg-1E54E5 p-3 my-3 flex">
				<div><i class="el-icon-warning h3 mb-0 text-primary"></i></div>
				<div class="flex-1 pl-2">
					<h6 class="text-primary">小提示</h6>
					<div class="text-secondary">亲爱的HR，您的帐号可同时发布 {{userInfo.release_jobs_sum}} 个职位，现已发布 {{userInfo.jobs_sum}} 个职位。</div>
				</div>
			</div>
			<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="340px" :label-position="labelPosition">
			  <el-form-item label="1" class="form-item-lable" label-width="260px">
			  	<div>职位信息</div>
			  	<div class="small text-secondary">我们将通过以下条件，为您推荐合适的求职者，请尽量详细填写。</div>
			  </el-form-item>
			  <el-form-item label="职位名称" prop="title">
			  	<div class="flex">
				  	<el-form-item prop="title" class="col-12 col-sm-4 pl-0 pr-0">
			    		<el-input v-model="form.title" placeholder="Title" maxlength="20" show-word-limit></el-input>
			    	</el-form-item>
				  	<el-form-item prop="jobs_type">
					    <el-radio-group class="ml-0 ml-sm-2" v-model="form.jobs_type">
					      <el-radio :label="1">全职</el-radio>
					      <el-radio :label="2">兼职</el-radio>
					      <el-radio :label="3">实习</el-radio>
					    </el-radio-group>
			    	</el-form-item>
			    </div>
			  </el-form-item>
			  <el-form-item label="工作地区" prop="jobs_area" >
			    <el-cascader 
			    	v-model="form.jobs_area"
			    	placeholder="试试搜索：北京"
			    	filterable
					:props="defaultProps"
			    	:options="arealist"
			    	class="col-12 col-sm-4 pl-0 pr-0">
			    </el-cascader>
			  </el-form-item>

			  <el-form-item label="薪资待遇">
			  	<div class="flex">
				  	<!-- <el-form-item prop="salary" class="w-150px">
				  		<el-select v-model="salary[0]" placeholder="最低薪资"
				  		@change="salaryInput($event,0)">
						    <el-option
						      v-for="item in salaryOptions[0]"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
					  	</el-select>
				  	</el-form-item>
					<div class="w-20px text-center"
					v-if="salary[0]>0">~</div>
				  	<el-form-item prop="salary" class="w-150px"
					v-if="salary[0]>0">
				  		<el-select v-model="salary[1]" placeholder="最高薪资"
				  		@change="salaryInput($event,1)">
						    <el-option
						      v-for="item in salaryOptions[1]"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
					  	</el-select>
				  	</el-form-item> -->
					<el-form-item class="w-150px" :class="{'is-error':salaryNotIntact}">
						<el-input v-if="form.undetermined" value="面议" disabled="disabled" placeholder="最低薪资"></el-input>
						<el-input v-else v-model.number="form.salary_min" placeholder="最低薪资"></el-input>
					</el-form-item>
					<div class="w-20px text-center">~</div>
					<el-form-item :class="{'is-error':salaryNotIntact}">
						<el-input v-if="form.undetermined" value="面议" disabled="disabled" placeholder="最高薪资"></el-input>
						<el-input v-else v-model.number="form.salary_max" placeholder="最高薪资"></el-input>
					</el-form-item>
					<div class="w-10px text-center">·</div>
				  	<el-form-item prop="salary_year" class="w-100px">
				  		<el-select v-model="form.salary_year" placeholder="薪资月">
						    <el-option
						      v-for="item in SalaryArray"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
					  	</el-select>
				  	</el-form-item>
					<div class="pl-3"><el-checkbox v-model="form.undetermined" :true-label="1" :false-label="0">面议</el-checkbox></div>
					<div class="pl-3" v-else-if="form.salary[1]">
						<span v-if="jobs_salary_show_type">
							{{form.salary[0]*1000}}-{{form.salary[1]*1000}}元/月
						</span>
						<span v-else>
							{{form.salary[0]}}-{{form.salary[1]}}K/月
						</span>
					</div>
					<div class="text-danger" v-if="form.salary_year>12">·{{form.salary_year}}薪</div>
			    </div>
			  </el-form-item>

			  <el-form-item label="条件限制">
			  	<div class="flex">
				  	<el-form-item prop="education_level" class="w-150px">
					  	<el-select v-model="form.education_level" filterable clearable default-first-option placeholder="请选择">
						    <el-option
						      v-for="item in education_level"
						      :key="item.value"
						      :label="item.title"
						      :value="item.value">
						    </el-option>
						</el-select>
					</el-form-item>
					<div class="w-20px"></div>
				  	<el-form-item prop="exp_level" class="w-150px">
					  	<el-select v-model="form.exp_level" filterable clearable default-first-option placeholder="请选择">
						    <el-option
						      v-for="item in exp_level"
						      :key="item.value"
						      :label="item.title"
						      :value="item.value">
						    </el-option>
						</el-select>
					</el-form-item>
					<div class="w-10px"></div>
				  	<el-form-item prop="number_of_recruiters">
					    <el-input-number v-model="form.number_of_recruiters" class="w-100px" placeholder="招聘人数"
					    :step="1" step-strictly :min="0"
					    controls-position="right">
					    </el-input-number>
					</el-form-item>
					<div class="pl-3" v-if="form.number_of_recruiters">{{form.number_of_recruiters}}人</div>
					<div class="pl-3" v-else>若干</div>
				</div>
			  </el-form-item>
			  <div class="flex">
				  <el-form-item label="职位类别" prop="jobs_cid">
				  	<el-cascader
					    v-model="form.jobs_cid"
					    :options="jobscatelist"
					    placeholder="试试搜索：销售"
					    :props="defaultProps"
					    filterable
					    clearable
					    :show-all-levels="false">
				    </el-cascader>
				  </el-form-item>
				  <el-form-item label="职位福利" prop="jobs_welfare"
				   label-width="120px">
				  	<el-select v-model="form.jobs_welfare" filterable multiple default-first-option :multiple-limit="6" placeholder="请选择">
					    <el-option
					      v-for="item in jobs_welfare"
					      :key="item.value"
					      :label="item.title"
					      :value="item.value">
					    </el-option>
					  </el-select>
				  </el-form-item>
			  </div>

			  <el-form-item label="职位详情" prop="jobs_desc">
			    <el-input v-model="form.jobs_desc" type="textarea":autosize="{ minRows: 8, maxRows: 50}" maxlength="2000" show-word-limit class="col-12 col-sm-8 pl-0 pr-0" placeholder="请勿填写QQ、微信、电话等联系方式及特殊符号、性别歧视词、违反劳动法相关内容，否则有可能会导致您的账号被封禁。"></el-input>
			  </el-form-item>

			  <el-form-item label="2" class="form-item-lable" label-width="260px">
			  	<div>联系方式</div>
			  	<div class="small text-secondary">求职者可以此信息与您取得联系，请准确填写。</div>
			  </el-form-item>

			  <div v-if="!form.contacts_type">
				  <el-form-item label="联系人" prop="contacts">
				    <el-input v-model="form.contacts" class="col-12 col-sm-3 pl-0 pr-0"></el-input>
				  </el-form-item>
				  <el-form-item label="联系电话" prop="contacts_mobile">
				    <el-input v-model="form.contacts_mobile" class="col-12 col-sm-3 pl-0 pr-0" maxlength="11"></el-input>
				  </el-form-item>
				  <el-form-item label="联系邮箱" prop="contacts_email">
				    <el-input v-model="form.contacts_email" class="col-12 col-sm-3 pl-0 pr-0"></el-input>
				  </el-form-item>
				  <el-form-item label="固定电话">
				  	<div class="flex">
				  		<el-form-item prop="area_code">
				    		<el-input v-model="tel.area_code" class="w-100px" maxlength="4"></el-input>
				  		</el-form-item>
				  		<div class="px-1">-</div>
				  		<el-form-item prop="number">
				    		<el-input v-model="tel.number" class="w-200px" maxlength="8"></el-input>
				  		</el-form-item>
				  		<div class="px-1">-</div>
				  		<el-form-item prop="extension">
				    		<el-input v-model="tel.extension" class="w-100px" maxlength="6"></el-input>
				  		</el-form-item>
				  	</div>
				  </el-form-item>
				  <el-form-item label="详细地址" prop="contacts_address">
				    <el-input v-model="form.contacts_address" class="col-12 col-sm-5 pl-0 pr-0"></el-input>
				  </el-form-item>
			  </div>
			  <el-form-item>
			    <el-checkbox v-model="form.contacts_type" 
			    :true-label="1"
			    :false-label="0">使用企业基本联系方式</el-checkbox>
			  </el-form-item>

			  <el-form-item>
			    <el-button type="primary" @click="submitForm('form')">立即保存</el-button>
			    <el-button @click="resetForm('form')">重置</el-button>
			  </el-form-item>
			</el-form>
		</div>
	</div>
</div>
{/block}
{block name="footer"}
{include file="module/login"/}
{/block}
{block name="script"}
<script type="text/javascript">
	var arealist={xycms:arealist serialize="json"/};
	var jobscatelist={xycms:jobscate serialize="json"/};
	var education_level={xycms:statusalias name="jobs/education_level" serialize="json"/};
	var exp_level={xycms:statusalias name="jobs/exp_level" serialize="json"/};
	var jobs_welfare={xycms:statusalias name="company/corporate_welfare" serialize="json"/};
	{empty name="Find"}
	var url='/user/jobs/release';
	var is_edit=false;
	var formData={
				title:'',
				jobs_cid:'',
				jobs_type:1,
				jobs_area:[],
				salary:[0,100],
				salary_year:12,
				education_level:0,
				exp_level:0,
				number_of_recruiters:0,
				jobs_welfare:[],
				jobs_desc:'',
				contacts:'{$CompanyContent.contacts}',
				contacts_mobile:'{$CompanyContent.contacts_mobile}',
				contacts_tel:'{$CompanyContent.contacts_tel}',
				contacts_email:'{$CompanyContent.contacts_email}',
				contacts_address:'{$CompanyContent.contacts_address}',
				contacts_type:1,
				undetermined:0
			};
	{else/}
	var url='/user/jobs/saveJobs/{$Find.id}';
	var is_edit=true;
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	formData.undetermined = 0;
	{/empty}
	var salary=[formData.salary[0],formData.salary[1]];
	if (formData.contacts_tel) {
		var telArr=formData.contacts_tel.split('-');
		var tel={
				area_code:telArr[0],
				number:telArr[1],
				extension:telArr[2]?telArr[2]:'',
			};
	}else{
		var tel={
				area_code:'',
				number:'',
				extension:'',
			};
	}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		computed:{
			salaryNotIntact(){
				return !Boolean(this.form.salary_min && this.form.salary_max) && this.form.undetermined!=1
			}	
		},
		data:{
			view:XYBase.view,
			userInfo:UserInfo,
			loginTabs:XYBase.loginTabs,
			feedback:XYBase.feedback,
			preventWindowClose:false,
			jobs_salary_show_type:{xycms:companyconfig name="jobs_salary_show_type"/},
			labelPosition:'right',
			activeName:'basic',
			arealist:arealist,
			jobscatelist:jobscatelist,
			education_level:education_level,
			exp_level:exp_level,
			jobs_welfare:jobs_welfare,
			form:formData,
			is_edit:is_edit,
			tel:tel,
			salary:salary,
			salaryOptions:[[],[]],
			SalaryArray:[],
	        defaultProps: {
	          	value: 'id',
	          	label: 'title',
	          	children: 'data',
	          	expandTrigger:'hover'
	        },
	        rules: {
	          title: [
	            { required: true, message: '请输入职位名称', trigger: 'blur' },
	          ],
	          jobs_area: [
	            { required: true, message: '请选择职位地域', trigger: 'blur' },
	          ],
	          jobs_cid: [
	            { required: true, message: '请选择职位分类', trigger: 'change' },
	          ],
	          jobs_desc: [
	            { required: true, message: '请输入职位详情', trigger: 'change' },
	          ],
	          contacts: [
	            { required: true, message: '请输入联系人', trigger: 'blur' },
	          ],
	          contacts_mobile: [
	            { required: true, message: '请输入联系人手机号', trigger: 'blur' },
	          ],
	          contacts_area: [
	            { required: true, message: '请输入选择联系地址', trigger: 'blur' },
	          ],
	          contacts_address: [
	            { required: true, message: '请输入联系地址', trigger: 'blur' },
	          ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
			userInfo:{
				handler(val,oldVal){
					if (!val.id) {
						window.location.reload();
					}
				},
				deep:true
			},
			form:{
				handler(val,oldVal){
					this.preventWindowClose=true;
				},
				deep:true
			},
		    tel:{
				handler(val,oldVal){
					if (val.area_code && val.number) {
						this.form.contacts_tel=val.area_code+'-'+val.number;
						if (val.extension) 
							this.form.contacts_tel=val.area_code+'-'+val.number+'-'+val.extension
					}else{
						this.form.contacts_tel='';
					}
				},
				deep:true
			},
		},
		created(){
			if (this.form.salary_min==0) {
				this.form.undetermined = 1;
			}
			XYBase.created(this);
			for (var i = 0; i <= 100; i++) {
				if(i===0){
					this.salaryOptions[0].push({value:i,label:'面议'});
				}else{
					if(this.jobs_salary_show_type){
					this.salaryOptions[0].push({value:i,label:(i)+'元'});
					}else{
					this.salaryOptions[0].push({value:i,label:i});
					}
				}
				if(i>=12 && i<=24)
					this.SalaryArray.push({value:i,label:i+'薪'});
			}
			this.salaryOptions[1].push({value:100,label:'面议'});
			if(this.form.id){
				if(this.salary[0]===0){
					if(this.jobs_salary_show_type){
					this.salaryOptions[1]=[{value:100,label:'100000元'}];
					}else{
					this.salaryOptions[1]=[{value:100,label:'100k'}];
					}
				}else if(this.salary[0]>=100){
					if(this.jobs_salary_show_type){
					this.salaryOptions[1]=[{value:100,label:'100000元'}];
					}else{
					this.salaryOptions[1]=[{value:100,label:'100k'}];
					}
				}else{
					this.salaryOptions[1]=[];
					let length=this.salary[0]+10;
					if(length>=100){
						length=101;
					}
					for (var i = this.salary[0]+1; i < length; i++) {
						if(this.jobs_salary_show_type){
						this.salaryOptions[1].push({value:i,label:(i)+'元'});
						}else{
						this.salaryOptions[1].push({value:i,label:i});
						}
					}
				}
				for (let i = 0; i < this.SalaryArray[1].length; i++) {
					if(this.SalaryArray[1][i].value===this.form.salary_max){
						this.SalaryIndex[1]=i;
						break;
					}
				}
			}
		},
		methods:XYBase.methods({
			salaryInput(val,index){
				switch(index){
					case 0:
						this.form.salary[0]=val;
						if(val===0){
							if(this.jobs_salary_show_type){
							this.salaryOptions[1]=[{value:100,label:'100000元'}];
							}else{
							this.salaryOptions[1]=[{value:100,label:'100k'}];
							}
						}else if(val>=100){
							if(this.jobs_salary_show_type){
							this.salaryOptions[1]=[{value:100,label:'100000元'}];
							}else{
							this.salaryOptions[1]=[{value:100,label:'100k'}];
							}
						}else{
							this.salaryOptions[1]=[];
							let length=val+10;
							if(length>=100){
								length=101;
							}
							for (var i = val+1; i < length; i++) {
								if(this.jobs_salary_show_type){
								this.salaryOptions[1].push({value:i,label:(i)+'元'});
								}else{
								this.salaryOptions[1].push({value:i,label:i});
								}
							}
						}
						this.salary[1]=this.salaryOptions[1][0].value;
						this.form.salary[1]=this.salaryOptions[1][0].value;
					break;
					case 1:
					this.salary[1]=val;
					this.form.salary[1]=val;
					break;
				}
			},
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				let salaryRange = [D.salary_min,D.salary_max].sort();
				if (this.salaryNotIntact) {
					XYBase.error("薪资范围不完整：请补全或选择面议");
					return false;
				}
				D.salary_min=salaryRange[0];
				D.salary_max=salaryRange[1];
				D.salary=salaryRange;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					_this.sendPost({
						url:url,
						data:D,
					},function(ret){
				        loading.close();
				        if (ret) {
							if(ret.code == 0){
								XYBase.success(ret.msg);
								_this.preventWindowClose=false;
								window.location.href="/user/jobs/management"
							}else if(ret.code == -605){
								_this.$confirm(ret.msg, '提示', {
									dangerouslyUseHTMLString:true,
						          	confirmButtonText: '升级套餐',
						          	cancelButtonText: '取消',
						          	type: 'warning'
						        }).then(() => {
									window.open('/user/vip/server');
						        }).catch(() => {
						        });
							}else{
								XYBase.msg(ret.msg);
							}
				        }
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.preventWindowClose=false;
				this.tel={
					area_code:'',
					number:'',
					extension:'',
				};
				this.$refs[formName].resetFields();
			},
		})
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
window.onbeforeunload=function(e){
	if (vm.preventWindowClose) {
		vm.$confirm('您的职位信息还未保存，确定离开当前页面吗？', '提示', {
          confirmButtonText: '保存',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        	vm.submitForm('form');
        }).catch(() => {
			vm.preventWindowClose=false;
        	XYBase.msg('已取消');
        });
	　　var e = window.event||e;  
	　　e.returnValue=("确定离开当前页面吗？");
	}
} 
</script>
{/block}